<template>
  <view class="login-container">
    <uni-icons type="contact-filled" size="100" color="#afafaf"></uni-icons>
    <button type="primary" class="btn-login" @click="getUserProfile">微信登录</button>
    <text class="tips-text">快给我登录!</text>
  </view>
</template>

<script>
  import {mapMutations,mapState} from 'vuex'
  
  export default {
    name:"my-login",
    data() {
      return {
        //请求参数对象，后面换掉
        queryObj:{
          // 下面这俩没用
          query:'',
          cid:6,
          
          // 页面索引
          pagenum:1,
          // 每页长度
          pagesize:10
        },


      };
    },
    
    computed:{
      ...mapState('m_user',['redirectInfo']),
      ...mapState('m_collection',['collection'])
    },
    
    methods:{
      // 更新用户信息方法
      ...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),
      ...mapMutations('m_collection',['updateAllCollection']),
      
      // 获取code
      async getToken(info){
        // 获取code值,也解构赋值出错误信息
         const [err,res] = await uni.login().catch(err => err)
         
         // console.log(res)
         
         // 如果返回失败
         // 如果报错，res就是undifined,err指向一个对象，此时就不能调用res.errMsg,所以在前面添加一个err
         if(err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！')
         
         // 要传给后端的参数
         const query ={
           code:res.code,
           encryptedData:info.encryptedData,
           iv:info.iv,
           rawData:info.rawData,
           signature:info.signature,
           nickName:info.userInfo.nickName
         }
         
         const{data:loginResult} = await uni.$http.post('/api/public/v1/user/wxlogin',query)
         
         console.log(loginResult)
         
         // 等后端
         // if(loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
         // else {}
         uni.$showMsg('登录成功!')
         
         // 登录成功后获取购物车和收藏
         //
         //
         //获取收藏
           // 发起请求
           // 这里直接拿goods_list的接口来用
           const {data:res1} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
           
           if(res1.meta.status !== 200) return uni.$showMsg()
           
           // 将获取的数据储存       
           this.updateAllCollection(res1.message.goods)
         
         //获取购物车
           

 
         
         // 将loginResult.message.token储存至vuex中，这里随便填一个，等后端
         this.updateToken('Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo')
         
         //判断是否是购物车来的,如果是则返回购物车界面
          this.NavigateBack()
      },
      
      // 返回购物车
      NavigateBack(){
        if (this.redirectInfo && this.redirectInfo.opentype === 'switchTab'){        
          uni.switchTab({
            url:this.redirectInfo.from,
            
            // 完成则清空相关数据
            complete: () => {
              uni.$showMsg('登录成功!')
              this.updateRedirectInfo(null)
            }
          })
        }
      },
      
      // 获取用户信息
      getUserProfile(e){
         uni.getUserProfile({
          desc: '用于登录',
          // 成功则储存信息
          success: (res) => {
                    // console.log(res)
                    this.updateUserInfo(res.userInfo) 
                    
                    this.getToken(res)
                  },
          // 失败
          fail:()=>{
            uni.$showMsg('您取消了登录授权')
          }
          
        })
        
        // console.log(data)
       
        
      }
    }
  }
</script>

<style lang="scss">
.login-container{
  height: 750rpx;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position:relative;
  overflow: hidden;
  

  
  .btn-login{
    width: 90%;
    border-radius: 100px;
    margin:15px 0;
  }
  .tips-text{
    font-size:12px;
    color:gray;
  }
}
</style>